<template>
  <div>
    <div class="dialog-content attack-portrait">
      <div class="dialog-header-one h-box justify-between">
        <BaseCollapse title="" style="width: 100%">
          <el-form>
            <div class="h-box" style="flex-wrap: wrap">
              <el-form-item label="节点数量">
                <el-select v-model="formData.page_size" style="width: 120px" placeholder="请选择">
                  <el-option :value="50" :label="50"></el-option>
                  <el-option :value="100" :label="100"></el-option>
                  <el-option :value="200" :label="200"></el-option>
                  <el-option :value="500" :label="500"></el-option>
                  <el-option :value="1000" :label="1000"></el-option>
                  <el-option :value="-1" label="不限"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="mg-l-sm" style="width: 220px" label="IP">
                <el-input @input="searchIp" v-model="formData.ip" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item class="mg-l-sm" label="">
                <base-button @click="search" type="search_icon_text" />
                <base-button @click="reset" type="refresh_icon_text" />
              </el-form-item>
            </div>
          </el-form>
        </BaseCollapse>
      </div>
      <conversation-views ref="conversationViewsRef" :searchData="formData" :type="type" :originIp="rowData?.ip || ''" />
    </div>
  </div>
</template>

<script setup lang="ts">
import ConversationViews from "@/views/attack-portrait/components/ConversationViews/index.vue";
import { getDataByPage } from "@/api/modules/attack-portrait/index";

import useUpdate from "@/hooks/useUpdate";
import { nextTick, reactive, ref, onMounted } from "vue";
import { deepClone } from "@/utils";
import BaseCollapse from "@/components/BaseCollapse/index.vue";
import BaseButton from "@/components/BaseButton/index.vue";

const conversationViewsRef = ref(null);

interface Props {
  title?: string;
  rowData?: Object;
  preview?: boolean;
  type: number;
}

const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({});
const loading = ref(false);
const props = withDefaults(defineProps<Props>(), {
  title: "源视图",
  rowData: undefined,
  preview: false,
  type: 1
});
defineOptions({
  name: "UpdateForm" // 默认策略
});

function open() {
  reset();
  openHandle({});
}

onMounted(() => {
  // console.log("mounted");
  // openHandle({});
  // showHandle.value = false;
  // setTimeout(() => {
  //   nextTick(() => {
  //     showHandle.value = true;
  //   });
  // },1000)
});

function getCurrentDate() {
  const date = new Date(); // 获取当前日期
  const year = date.getFullYear(); // 获取年份
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 获取月份并补零
  const day = String(date.getDate()).padStart(2, "0"); // 获取日期并补零

  return `${year}-${month}-${day}`; // 返回格式化后的日期
}

const defaultData = {
  page_size: 500,
  time_start: `${getCurrentDate()} 00:00:00`,
  time_end: new Date(),
  ip: ""
};
const formData = reactive(deepClone(defaultData));

function search() {
  if (conversationViewsRef.value) {
    conversationViewsRef.value?.clear();
    conversationViewsRef.value?.toGetLinkList();
    setTimeout(() => {
      searchIp();
    }, 800);
  }
}

function reset() {
  defaultData.time_start = `${getCurrentDate()} 00:00:00`;
  defaultData.time_end = new Date();
  Object.assign(formData, defaultData);
  search();
}

function searchIp() {
  if (conversationViewsRef.value) {
    conversationViewsRef.value?.searchIp(formData.ip);
  }
}
</script>

<style scoped>

.dialog-content {
  flex: 1;
  background: #fff;
  width: 90%;
  height: calc(100vh - 100px);
}
</style>
